<template>
	<div class="app-container" v-loading="datas.mtloading">

		<div class="treeRef">
			<el-tree ref="treeRef" :data="datas.treelist" show-checkbox node-key="node_id" highlight-current
				@check="checkChange" :props="datas.defaultProps" :default-checked-keys="datas.nodeSelect">
				<template #default="{ node, data }">
					<div class="w-full">
						<div class="custom-tree-node w-4/12">{{ node.label }}</div>
						<div class="data_auth">
							<el-radio-group v-model="data.d_type" v-if="data.data_auth == 1">
								<el-radio value="0" label="0">{{ $t('public.not')}}</el-radio>
								<el-radio value="1" label="1">{{ $t('public.all')}}</el-radio>
								<el-radio value="2" label="2">{{ $t('public.department')}}</el-radio>
								<el-radio value="3" label="3">{{ $t('public.me')}}</el-radio>
								<el-radio value="4" label="4">{{ $t('public.allSubo')}}</el-radio>
								<el-radio value="5" label="5">{{ $t('public.directly')}}</el-radio>
							</el-radio-group>
						</div>
					</div>
				</template>
			</el-tree>
		</div>


		<div class="text-center submit nodeBtn">
			<div class="inline-block ">
				<el-button type="primary" @click="submit">{{ $t('public.save') }}</el-button>
				<el-button @click="cancell">{{ $t('public.cancel') }}</el-button>
			</div>
		</div>

	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import { getauthrolenodeList, bindauthrolenode, getauthnodeList } from '@/api/account';
import { useRouter, useRoute } from "vue-router";
const router = useRouter()
const route = useRoute()
let treeRef = ref<any>();
let datas = reactive({
	mtloading: false, // 加载
	authlist: [], // 原始节点列表
	treelist: [], // 节点列表
	defaultProps: {
		children: 'children',
		label: 'name',
		id: 'node_id',
		d_type: 'd_type',
		class: 'test'
	},
	nodeSelect: [],// 选中的节点,
	nodeSelectData: []
})
// 取消
let cancell = () => {
	getinfo()
	router.back()
}
// 获取列表信息
let getinfo = () => {
	let id = JSON.parse(decodeURI(route.query.l)).info
	datas.mtloading = true
	getauthrolenodeList({ role_id: id }).then(res => {
		datas.mtloading = false
		if (res.state == 200) {
			datas.nodeSelect = []
			datas.treelist.forEach((item) => {
				final(item, res.data)
			})
			datas.authlist.forEach(item => {
				res.data.forEach(items => {

					if (item.node_id == items.node_id) {
						item.d_type = items.d_type + ''
					}
				})
			})
		}
	}).catch(err => {
		datas.mtloading = false
	})
}
// 获取接口信息
let geturl = () => {
	datas.mtloading = true
	getauthnodeList().then(res => {
		if (res.state == 200) {
			datas.authlist = res.data
			res.data.forEach((item) => {
				item.d_type = '0'
				item.children = []
				cabinet(item)
			})
		}
		for (let item of res.data) {
			if (item.pid == 0) {
				datas.treelist.push(item)
			}
		}
		getinfo()
	})
}

// 获取下级
let cabinet = (e) => {
	for (let item of datas.authlist) {
		if (e.node_id == item.pid) {
			e.children.push(item)
		}
	}
}

// 获取最后的子节点
let final = (item, data) => {
	// 代表最后的子节点
	if (item.children.length == 0) {
		for (let ime of data) {
			if (ime.node_id == item.node_id) {
				datas.nodeSelect.push(item.node_id)
				datas.nodeSelectData.push(item)
			}
		}
	} else {
		item.children.forEach((ime) => {
			final(ime, data)
		})
	}
}

let getAllNode = (data: any[]) => {
	let treArr: any[] = []
	data.forEach(item => {
		if (item.data_auth == 1) {
			treArr.push(item)
		}
		if (item.children) {
			item.children.forEach(itemc => {
				if (itemc.data_auth == 1) {
					treArr.push(itemc)
				}
				if (itemc.children) {
					itemc.children.forEach(item => {

						if (item.data_auth == 1) {
							treArr.push(item)
						}
					})
				}
			})
		} else {
			return
		}
	})
	return treArr
}
interface Tree {
	name: string
}
let setChecked = (data: Tree, checked: boolean) => {
}
let checkChange = (data: Tree, checked: boolean,) => {
}
// 保存
let submit = () => {
	let complete = treeRef.value.getCheckedKeys(); // 完全选中
	let part = treeRef.value.getHalfCheckedKeys(); // 部分选中
	let partCurr = treeRef.value.getCurrentNode()

	let array = [...part, ...complete].sort((a, b) => a - b)
	let treArr = getAllNode(datas.treelist)
	let arr = {}
	for (let item of array) {
		arr[item] = 0
	}
	let obj = {
		role_id: JSON.parse(decodeURI(route.query.l)).info,
		nodeList: arr
	}
	for (let item of Object.keys(obj.nodeList)) {
		treArr.forEach(items => {
			if (item == items.node_id) {
				obj.nodeList[item] = Number(items.d_type)
			}
		})
	}
	datas.mtloading = true
	bindauthrolenode(obj).then(res => {
		datas.mtloading = false
		if (res.state == 200) {
			ElMessage({
				message: $t('message.bindSuccess'),
				type: 'success'
			})
			router.back()
			return
		}
		ElMessage({
			message: $t('message.networkFailed'),
			type: 'error'
		})
	})

	console.log(obj)
}

geturl()


</script>
<style>
.custom-tree-node {
	line-height: var(--el-tree-node-content-height);
}

.el-tree-node__content {
	height: auto !important;
	align-items: flex-start;
}

.treeRef {
	margin-bottom: 40px;
}

.nodeBtn {
	position: fixed;
	background-color: #ffffff;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 55;
	padding: 10px;
}
</style>